<template>
  <div
    class="certain-category-search-wrapper"
    style="width: 350px; margin-top: 15px;padding-bottom:10px"
  >
    <a-auto-complete
      class="certain-category-search"
      dropdown-class-name="certain-category-search-dropdown"
      :dropdown-match-select-width="false"
      :dropdown-style="{ width: '300px' }"
      style="width: 100%"
      placeholder="查询名称或id。支持模糊查询..."
      option-label-prop="value"
      @select="onSelectObj"
    >
      <template slot="dataSource">
        <a-select-opt-group v-for="station in dataSource" :key="station.uid">
          <span slot="label">
            {{ station.s_name }}
          </span>
          <a-select-option
            v-for="thing in station.children"
            :key="thing.uid"
            :value="thing.s_name"
          >
            {{ thing.s_name }}
          </a-select-option>
        </a-select-opt-group>
      </template>
      <a-input v-model="searchText">
        <a-icon
          slot="suffix"
          type="search"
          class="certain-category-icon"
          @click="onSearch"
        />
      </a-input>
    </a-auto-complete>
  </div>
</template>
<script>
import { queryThing } from "@/services/things";
export default {
  data() {
    return {
      searchText: "",
      dataSource: [],
      thingCache: {},
    };
  },
  methods: {
    onSearch() {
      console.log("--------", this.searchText);
      let self = this;
      this.thingCache = {};
      queryThing(this.searchText).then((res) => {
        //self.dataSource = res
        let stations = [];
        res.forEach((element) => {
          self.thingCache[element.uid] = element;
          let st = stations.find((s) => {
            return s.uid == element.station_id;
          });
          if (!st) {
            st = { uid: element.station_id, s_name: element.station_name };
            stations.push(st);
          }
          if (st) {
            if (!st.children) {
              st.children = [];
            }
            st.children.push(element);
          }
        });
        self.dataSource = stations;
        console.log("-------------", stations);
      });
    },
    onSelectObj(value, data) {
      console.log("*************", value, data.key, data);
      let thing = this.thingCache[data.key]
      this.$emit("on-select-thing", data.key, thing);
    },
  },
};
</script>

<style scoped>
.certain-category-search-wrapper
  >>> .certain-category-search.ant-select-auto-complete
  .ant-input-affix-wrapper
  .ant-input-suffix {
  right: 12px;
}
.certain-category-search-wrapper >>> .certain-search-item-count {
  position: absolute;
  color: #999;
  right: 16px;
}
.certain-category-search-wrapper
  >>> .certain-category-search.ant-select-focused
  .certain-category-icon {
  color: #108ee9;
}
.certain-category-search-wrapper >>> .certain-category-icon {
  color: #6e6e6e;
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  font-size: 16px;
}
</style>